<template>
  <div>
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-cell-group class="cash">
      <van-field
        v-model="formData.cashMethod"
        required
        @click="showPopup"
        label="提现方式"
        placeholder="请输入"
      />

      <van-field
        v-model="formData.cantakeMoney"
        label="可提分润"
        placeholder="请输入"
        required
      />
      <van-field
        v-model="formData.money"
        label="提取金额"
        placeholder="请输入"
        required
      />
    </van-cell-group>
    <van-button class="sticky" type="info">
      提 现
    </van-button>
    <van-popup v-model="show" position="bottom" :style="{ height: '25%' }">
      <van-picker :columns="columns" @change="onChange" />
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar } from "vant";

Vue.use(NavBar);

export default {
  name: "cash",

  data() {
    return {
      formData: {
        cashMethod: "",
        cantakeMoney: 0,
        money: 0
      },

      columns: ["微信", "支付宝", "银行卡"],

      show: false
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },

    onClickLeft() {
      this.$router.push("/cashManage");
    },

    onChange(picker, value) {
      this.formData.cashMethod = value;
    }
  }
};
</script>

<style lang="scss" scoped>
.cash {
  margin-top: 5px;
}
</style>
